<!DOCTYPE html>
<html lang="en"  >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

   <div id="app">


       <el-form  label-width="130px">
           <el-form-item label="模糊条件">
               <el-col :span="6">
               <el-input v-model="input"  placeholder="请输入商品大类名称进行查询"></el-input>
               </el-col>

               <el-button size="medium" type="info" @click="findPage()" >查询</el-button>
               <el-button size="medium" type="danger" @click="toggleSelection()">删除</el-button>
               <el-button size="medium" type="success " @click="addBigProduct()">新增</el-button>
        </el-form-item>
          <!-- 显示页面-->
       <el-table
               @selection-change="handleSelectionChange"
               :data="showBigProducts"
               border
               style="width: 100%">
           <el-table-column

                   type="selection"
                   width="55">
           </el-table-column>
           <el-table-column
                   prop="productBigTypeSort"
                   label="序号"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="productBigTypeName"
                   label="名称"
                   width="180">
           </el-table-column>

           <el-table-column prop="imageAddr" label="图片">
               <template   slot-scope="scope">
                   <img :src="scope.row.imageAddr"  min-width="70" height="70" />
               </template>
           </el-table-column>

           <el-table-column
                   prop="productBigTypeComment"
                   label="备注">
           </el-table-column>
           <el-table-column
                   fixed="right"
                   label="操作"
                   width="100">
               <template slot-scope="scope">
                   <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                   <el-button @click="deletes(scope.row)" type="text" size="small">删除</el-button>
               </template>
           </el-table-column>
       </el-table>

          <!-- 分页-->
           <el-pagination
                   background
                   layout="prev, pager, next"
                   :page-size="Page.size"
                   @current-change="currentChange"
                   :total="Page.total">
           </el-pagination>


          <!-- 新增-->
           <el-dialog
                   title="新增"
                   :visible.sync="dialogVisible"
                   width="35%"
                   :before-close="handleClose">
               <el-form :model="addBigProducts"  label-width="100px" class="demo-ruleForm">
                   <el-form-item label="大类名字" prop="productBigTypeName">
                       <el-input v-model="addBigProducts.productBigTypeName" @change="checkBigName(addBigProducts.productBigTypeName)"></el-input>
                   </el-form-item>
                   <el-form-item label="大类的序号" prop="productBigTypeSort">
                       <el-input v-model="addBigProducts.productBigTypeSort"></el-input>
                   </el-form-item>
                   <el-form-item label="大类的备注" prop="productBigTypeComment">
                       <el-input v-model="addBigProducts.productBigTypeComment"></el-input>
                   </el-form-item>
                   <!--删除图片的回调函数 :on-remove -->
                   <!--上传图片成功的回调函数 :on-success-->
                   <!--图片的集合 productImgs-->
                   <!--规范上传图片格式 accept-->
                   <el-upload
                           class="upload-demo"
                           name="files"
                           ref="upload"
                           action="/pawn/product-big-type/onload"
                           :on-remove="handleRemove"
                           :on-success="success"
                           :limit=1
                           :file-list="fileList"
                           :on-error="error"
                           accept=".jpg,.png"
                           list-type="picture">
                       <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
                   <el-form-item label="鉴定图定义" prop="">
                       <div v-if="jdtName[0].name!=''">
                       <div v-for="jdt in jdtName">
                           <el-input v-model="jdt.name"  ></el-input>
                               <el-select v-model="jdt.choose" placeholder="请选择">
                                   <el-option
                                           v-for="item in options"
                                           :key="item.value"
                                           :label="item.value"
                                           :value="item.value">
                                   </el-option>
                               </el-select>

                       </div>
                       </div>
                       <el-button type="info" @click="jdt()">新增</el-button>
                   </el-form-item>


               </el-form>
               <span slot="footer" class="dialog-footer">
    <el-button @click="cancel()">取 消</el-button>
    <el-button type="primary" @click="addProductType()">确 定</el-button>
               </span>
     </el-dialog>
                 <!--编辑修改-->
           <el-dialog
                   title="修改"
                   :visible.sync="dialogVisible1"
                   width="35%"
                   :before-close="handleClose">
               <el-form :model="updateBigProducts"  label-width="100px" class="demo-ruleForm">
                   <el-form-item label="大类名字" prop="productBigTypeName">
                       <el-input v-model="updateBigProducts.productBigTypeName" @change="checkUpdateBigName(updateBigProducts.productBigTypeName)"></el-input>
                   </el-form-item>
                   <el-form-item label="大类的序号" prop="productBigTypeSort">
                       <el-input v-model="updateBigProducts.productBigTypeSort"></el-input>
                   </el-form-item>
                   <el-form-item label="大类的备注" prop="productBigTypeComment">
                       <el-input v-model="updateBigProducts.productBigTypeComment"></el-input>
                   </el-form-item>
                   <!--删除图片的回调函数 :on-remove -->
                   <!--上传图片成功的回调函数 :on-success-->
                   <!--图片的集合 productImgs-->
                   <!--规范上传图片格式 accept-->
                   <el-upload
                           class="upload-demo"
                           name="files"
                           ref="updateUpload"
                           action="/pawn/product-big-type/onload"
                           :limit=1
                           :file-list="updateFile"
                           :on-error="error"
                           :on-success="updateSuccess"
                           accept=".jpg,.png"
                           list-type="picture">
                       <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
               </el-form>
               <span slot="footer" class="dialog-footer">
    <el-button @click="updateCancel()">取 消</el-button>
    <el-button type="primary" @click="updateProductType()">确 定</el-button>
               </span>
           </el-dialog>


           <!--添加鉴定图名字-->
           <el-dialog
                   title="提示"
                   :visible.sync="dialogVisible2"
                   width="30%"
                   :before-close="handleClose">
               <el-form   label-width="100px" class="demo-ruleForm">
                   <el-form-item label="鉴定图名字" >
                       <el-input v-model="Jdtdata.name"></el-input>
                   </el-form-item>
               </el-form>
               <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible2 = false">取 消</el-button>
      <el-button type="primary" @click="addJdtName()">确 定</el-button>
               </span>
           </el-dialog>

   </div>

    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                value: '',
                options: [{
                    value: '必选'
                }, {
                    value: '可选'
                }],
                index:-1,
                Jdtdata:{name:''},
                jdtName:[{name:'',choose:''}],
                //大类的名字
                input:'',
                //大类的id
                selectId:[],
                //新增数据打开页面
                dialogVisible:false,
                //编辑数据打开页面
                dialogVisible1:false,
                //
                dialogVisible2:false,



                //新增的数据
                addBigProducts:{
                    //新增大类的名字
                    productBigTypeName:'',
                    //新增的大类的序号
                    productBigTypeSort:'',
                    //新增大类的备注
                    productBigTypeComment:'',
                    //新增大类的图标地址
                    imageAddr:'',
                },
                //修改数据
                updateBigProducts:{
                    //新增大类的名字
                    productBigTypeName:'',
                    //新增的大类的序号
                    productBigTypeSort:'',
                    //新增大类的备注
                    productBigTypeComment:'',
                    //新增大类的图标地址
                    imageAddr:'',
                    //大类id
                    productBigTypeId:'',
                    //图片id
                    imageId:''
                },
                //显示的数据
                showBigProducts:[],
                url:'',
                fileList:[],//图片
                updateFile:[],
                //分页的条件
                Page:{index:1,size:2,name:'',total:2}

            },
            methods:{

                //查询
                findPage(){
                    this.Page. name=this.input;
                    this.Page.index=1;
                    this.Page.size=2;
                    this.Page.total=2;
                    this.$options.methods.common_show(this);
                    this.showBigProducts=[];

                },
                //编辑
                edit(row) {
                    this.dialogVisible1=true;
                    this.updateBigProducts.productBigTypeName=row.productBigTypeName;
                    this.updateBigProducts.productBigTypeComment=row.productBigTypeComment;
                    this.updateBigProducts.productBigTypeSort=row.productBigTypeSort;
                    this.updateFile[0]={name:'',url:row.imageAddr};
                    this.updateBigProducts.imageId=row.imageId;
                    this.updateBigProducts.productBigTypeId=row.productBigTypeId;

                    var updateObjec={productBigTypeId:1}

                },
                //取消修改
                updateCancel(){
                    this.dialogVisible1=false;
                    this.updateFile[0]=[];
                    //this.$refs.updateUpload.clearFiles();//清空上传图片数据
                    this.updateBigProducts={ //新增大类的名字
                        productBigTypeName:'',
                        //新增的大类的序号
                        productBigTypeSort:'',
                        //新增大类的备注
                        productBigTypeComment:'',
                        //新增大类的图标地址
                        imageAddr:'',
                        //大类id
                        productBigTypeId:'',
                        //图片id
                        imageId:''
                    };
                },
                //修改删除图片
                updateHandleRemove(){
                 // this.updateFile[0]={url:'',name:''};

                },

                //确定修改
                updateProductType(){
                    var UpdateProductBigTypeParam=this.updateBigProducts;
                    axios.post('/pawn/product-big-type/updateBigProductType', UpdateProductBigTypeParam)
                        .then(function (response) {
                            if(response.data.code==200){
                                vm.$options.methods.common_removeData(vm)
                                vm.$message.success('新增成功');//提醒
                            }else{
                                vm.$message.error('新增失败');//提醒
                            }

                        })


                },
                updateSuccess(response){
                    console.log(response.data[0]);
                    this.updateBigProducts.imageAddr=response.data[0];

                },
                //删除
                deletes(row){
                    console.log(row);
                },
                //批量删除
                toggleSelection(rows){
                 console.log( this.selectId);
                },
                //获取批量选择的id
                handleSelectionChange(row){
                   for(var i=0;i<row.length;i++){
                       this.selectId[i]=row[i].productBigTypeId ;
                   }
                   console.log(row)

                },
                //上下页
                currentChange(row){
                  this.Page.index=row;
                  var vm=this;
                    this.$options.methods.common_show(vm);
                },
                //打开新增页面
                addBigProduct(){
                    this.dialogVisible=true;
                },
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                //删除的回调函数
                handleRemove() {
                    var vm=this;
                    this.$options.methods.common_removeImage(vm)
                },
                //成功上传的回调函数
                success(response){
                    console.log(response.data[0]);
                    console.log(response);
                    this.addBigProducts.imageAddr=response.data[0];

                },
                //上传失败回调函数
                error(){
                    this.$message.error('上传文件失败');
                },
                //新增函数
                addProductType(){
                   var addBigProductType=this.addBigProducts;
                   var vm=this;
                    axios.post('/pawn/product-big-type/addProductBigType', addBigProductType)
                        .then(function (response) {
                            if(response.data.code==200){
                                vm.$options.methods.common_removeData(vm)
                                vm.$message.success('新增成功');//提醒
                            }else{
                                vm.$message.error('新增失败');//提醒
                            }

                        })
                },
                //取消函数
                cancel(){
                   var vm=this;
                    this.$options.methods.common_removeImage(vm);
                    this.$options.methods.common_removeData(vm);

                },
                //公共的删除图片函数
                common_removeImage(vm){
                    var imageAddr=vm.addBigProducts.imageAddr;
                    console.log(imageAddr);
                    if(imageAddr!=null&&imageAddr!=""){
                        $.ajax({
                            url:"/pawn/product-big-type/deleteImage",
                            type: "post",
                            dataType: "json",
                            data:{"imageAddr":imageAddr},
                            success:function (data) {

                            }
                        })
                    }

                },
                //公共的删除填写的数据
                common_removeData(vm){
                    vm.addBigProducts={
                        productBigTypeName:'',
                        productBigTypeSort:'',
                        productBigTypeComment:'',
                        imageAddr:'',};//关闭清空数据
                    vm.dialogVisible=false//关闭页面
                    vm.$refs.upload.clearFiles();//清空上传图片数据
                },
                //查询大类名字是否重复
                checkBigName(name){
                    var vm=this;
                    $.ajax({
                        url:"/pawn/product-big-type/findName",
                        type: "get",
                        dataType: "json",
                        data:{"name":name},
                        success:function (data) {
                             if(data.code!=200){
                                 vm.addBigProducts.productBigTypeName='';
                                 vm.$message.error(data.message);//提醒
                             }
                        }
                    })
                },
                checkUpdateBigName(name){
                    var vm=this;
                    $.ajax({
                        url:"/pawn/product-big-type/findName",
                        type: "get",
                        dataType: "json",
                        data:{"name":name},
                        success:function (data) {
                            if(data.code!=200){
                                vm.updateBigProducts.productBigTypeName='';
                                vm.$message.error(data.message);//提醒
                            }
                        }
                    })
                },
                //公共的显示数据
                common_show(vm){
                    $.ajax({
                        url:"/pawn/product-big-type/findPage",
                        type: "get",
                        dataType: "json",
                        data:vm.Page,
                        success:function (data) {
                            vm.showBigProducts=data.data.records;
                            vm.Page.index=data.data.current;
                            vm.Page.size=data.data.size;
                            vm.Page.total=data.data.total;
                        }
                    })
                },
                //鉴定图
                jdt(){
                    this.dialogVisible2=true;
                },
                addJdtName(){
                    this.index++;
                    this.jdtName[this.index].name= this.Jdtdata.name;
                    this.jdtName[this.index+1]={name:'',choose: ''};
                    this.Jdtdata.name='';
                    this.dialogVisible2=false;
                }
            },
            mounted(){
                var vm=this;
                this.$options.methods.common_show(vm)
            }
        })
    </script>
</body>
</html>